<template>
  <div class="container">
    <div class="main-area article-area shadow">
      <article class="article">
        <div class="author-block">
          <router-link to="/" class="user-photo">
            <img :src="article.author.photo">
          </router-link>
          <div class="author-user-box">
            <router-link to="/" class="title">{{article.author.name}}</router-link>
            <div class="meta-box">
              <span class="time">{{article.send_time}}</span>
              <span class="views-count">阅读 {{article.times}}</span>
              <span class="dot" v-if="this.article.isAuthor">·</span>
              <span class="update" @click="update" v-if="this.article.isAuthor">编辑</span>
            </div>
          </div>
        </div>
        <h1 class="article-title">{{article.title}}</h1>
        <div class="article-content" v-html="article.content" v-highlight ref="articleContent"></div>
      </article>
      <div class="tag-list-box">
        <div class="tag-list-title">关注下面的标签，发现更多相似文章</div>
        <div class="tag-list">
          <router-link :to="'/tag/'+item.id" class="tag-item" v-for="item in article.tagList" :key="item.id">
            <div class="tag-title">{{item.module_name}}</div>
          </router-link>
        </div>
      </div>
      <!-- 评论区 -->
      <comment :articleId="this.article.articleId" id="comment"></comment>
    </div>
    <!-- 底部文章列表 -->
    <div class="main-area shadow article-list">
      <div class="title">
        相关推荐
      </div>
      <article-list :tagId="this.getMoreListId" :articleId="this.article.articleId"></article-list>
    </div>
    <!-- 侧边栏 -->
    <slider class="slider" :author="article.author" :articleId="this.article.articleId"></slider>
    <!-- 侧边快捷操作 -->
    <div class="quick-panel">
      <div class="quick-panel-item praise" :class="{active: this.article.isPraise}" @click="parsehandle">
        <span class="iconfont">&#xe606;</span>
        <span class="badge">{{this.article.praise}}</span>
      </div>
      <div class="quick-panel-item" @click="scrollToComment">
        <span class="iconfont">&#xe66d;</span>
        <span class="badge">{{this.article.comment}}</span>
      </div>
      <div class="quick-panel-item collect" :class="{active: this.article.isFavorite}" @click="collecthandle">
        <span class="iconfont">&#xe625;</span>
      </div>
      <div class="share-title">分享</div>
      <div class="quick-panel-item" @click="copyLink" title="复制链接">
        <span class="iconfont">&#xe602;</span>
      </div>
      <div class="quick-panel-item" @click="shareToqq" title="分享到QQ">
        <span class="iconfont">&#xe60a;</span>
      </div>
      <div class="quick-panel-item wx" title="分享到微信">
        <span class="iconfont">&#xe61b;</span>
        <vue-qrcode class="qrcode" :Qwidth="200" :Qheight="200" :Qcontent="thisUrl"></vue-qrcode>
      </div>
    </div>
    <!-- 跳转至顶部 -->
    <scroll-totop></scroll-totop>
    <input type="text" class="copyLinkInput" ref="copyLinkInput">
  </div>
</template>

<script>
import comment from './comment/comment' // 引入评论
import slider from './slider/slider' // 引入侧边栏
import articleList from '@/pages/taglist/list/articleList' // 引入底部文章列表
import scrollTotop from '@/components/scrolltotop/toTop' // 引入底部文章列表
import marked from 'marked' // 引入markdown语法编译器
import vueQrcode from '@/components/qrcode/qrcode' // 引入二维码
export default {
  name: '',
  data () {
    return {
      article: {
        articleId: 0,
        title: '',
        content: '',
        tagList: [],
        send_time: '',
        times: 0,
        author: {},
        isAuthor: false,
        praise: 0,
        isPraise: false,
        comment: 0,
        isFavorite: false
      },
      getMoreListId: '',
      thisUrl: window.location.href
    }
  },
  components: {
    comment,
    slider,
    articleList,
    scrollTotop,
    vueQrcode
  },
  methods: {
    initContent (res, _this) {
      let data = res.dataInfo
      _this.article.articleId = Number(data.id)
      _this.article.title = data.title
      _this.article.content = marked(data.content)
      _this.article.tagList = data.second_module
      _this.getMoreListId = data.second_module[0].id
      _this.article.send_time = data.send_time
      _this.article.times = data.times
      _this.article.author = data.author
      _this.article.isAuthor = data.isAuthor
      _this.article.praise = data.praise
      _this.article.isPraise = data.isPraise
      _this.article.comment = data.comment
      _this.article.isFavorite = data.isFavorite
    },
    scrollToComment () {
      document.querySelector('#comment').scrollIntoView(true)
    },
    parsehandle () {
      this.$ajax({
        method: 'post',
        url: '/web/php/article.php',
        data: this.$qs.stringify({
          type: 'praise_article',
          articleId: this.article.articleId
          // page: this.ajax.page
        })
      }).then((result) => {
        console.log(result)
        result = result.data
        switch (result.returnCode) {
          case 10040:
            this.common.showLogBox(this)
            break
          case 1001300:
            this.article.isPraise = true
            this.article.praise++
            break
          case 1001302:
            this.article.isPraise = false
            this.article.praise--
        }
      })
    },
    collecthandle () {
      this.$ajax({
        method: 'post',
        url: '/web/php/article.php',
        data: this.$qs.stringify({
          type: 'favorite_article',
          articleId: this.article.articleId
        })
      }).then((result) => {
        console.log(result)
        result = result.data
        switch (result.returnCode) {
          case 10040:
            this.common.showLogBox(this)
            break
          case 1001400:
            this.article.isFavorite = true
            break
          case 1001402:
            this.article.isFavorite = false
        }
      })
    },
    copyLink () {
      this.$refs.copyLinkInput.value = window.location.href
      this.$refs.copyLinkInput.select()
      let bool = document.execCommand('copy')
      if (bool) {
        this.common.showRegError('复制成功', this, true)
      } else {
        this.common.showRegError('您的浏览器不支持访问剪切板，请您手动复制地址栏网址分享', this)
      }
    },
    shareToqq () {
      let summary = this.$refs.articleContent.innerText.slice(0, 108)
      window.open('http://connect.qq.com/widget/shareqq/index.html?url=http://shiliqingshan.com/web/#/artice/' + this.article.articleId + '&sharesource=qzone&title=' + this.article.title + '&pics=http://shiliqingshan.com/web/static/img/logo100.jpg&summary=' + summary + '&desc=我找到了一篇特别好的文章，推荐你也看看')
    },
    update () {
      this.$router.push('/article/update/' + this.$route.params.id)
    },
    getArticle () {
      // console.log(this)
      this.$ajax({
        method: 'post',
        url: '/web/php/article.php',
        data: this.$qs.stringify({
          type: 'get_article',
          articleId: this.$route.params.id
        })
      }).then((res) => {
        console.log(res)
        res = res.data
        switch (res.returnCode) {
          case 10080:
            this.$options.methods.initContent(res, this)
            break
          case 10081:
            this.$router.push('/')
            this.common.showRegError(res.dataInfo, this)
            break
          default:
            this.$router.push('/')
            this.common.showRegError('参数错误，同学你不要调皮哦', this)
            break
        }
      })
    }
  },
  mounted () {
    this.getArticle()
  },
  watch: {
    $route (to, from) {
      // this.article.articleId = Number(this.$route.params.id)
      this.getArticle()
      document.documentElement.scrollTop = document.body.scrollTop = 0
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.copyLinkInput
  position absolute
  top 0
.container
  position relative
  width 100%
  max-width 19.2rem
  margin .44rem auto 0
  .scrollToTop
    position fixed
    right 20px
    bottom 20px
  .shadow
    box-shadow 0 .02rem .04rem 0 rgba(0,0,0,.05)
  .main-area
    background $theme-background
    width 14rem
    max-width 100%
    box-sizing border-box
    &.article-area
      padding  0 .48rem
      margin-bottom .36rem
      .article
        padding-top .48rem
        margin-bottom .72rem
        .author-block
          display flex
          align-items center
          margin-bottom .48rem
          .user-photo
            width .8rem
            height 0.8rem
            border-radius 50%
            overflow hidden
            margin-right .24rem
            img
              width 100%
          .author-user-box
            line-height 1.4
            .title
              font-size .32rem
              font-weight bold
            .meta-box
              color $theme-3-color
              .time
                letter-spacing .02rem
              .views-count
                margin-left .12rem
              .dot
                margin 0 .12rem
                font-weight bold
              .update
                color #1264b6
                cursor pointer
        .article-title
          font-size .6rem
          font-weight bold
          margin .4rem 0
          line-height 1.5
        .article-content
          overflow hidden
      .tag-list-box
        margin-bottom .6rem
        .tag-list-title
          border-left .12rem solid $theme-5-color
          font-size .3rem
          padding-left .48rem
          font-weight bold
          margin-bottom .48rem
        .tag-list
          display flex
          flex-wrap wrap
          .tag-item
            border .02rem solid $theme-5-color
            display flex
            align-items center
            padding .04rem
            margin 0 .3rem .24rem 0
            border-radius .02rem
            &:hover
              background #f3f3f3
            .tag-title
              padding 0 .2rem
              color $theme-3-color
    &.article-list
      .title
        color $theme-3-color
        padding .32rem .48rem
        font-weight bold
        font-size .3rem
        border-bottom .02rem solid $theme-7-color
  .quick-panel
    position fixed
    width .72rem
    height 2rem
    top 4rem
    margin-left -1.68rem
    .quick-panel-item
      width .72rem
      height 0.72rem
      background $theme-background
      margin-bottom .2rem
      border-radius 50%
      box-shadow 0 2px 4px 0 rgba(0,0,0,.04)
      cursor pointer
      display flex
      align-items center
      justify-content center
      position relative
      &.praise.active
        .iconfont
          color $theme-8-color
        .badge
          background $theme-8-color
      &.collect.active
        .iconfont
          color $theme-9-color
      &.wx
        &:hover .qrcode
          display block
        .qrcode
          display none
          position fixed
          z-index 100
          top 50%
          left 50%
          margin-top -110px
          margin-left -110px
          padding 10px
          background $theme-background
          box-shadow 0 0 20px 3px rgba(0,0,0,.3)
          border-radius 5px
      &:hover .iconfont
        color $theme-2-color
      .iconfont
        color $theme-4-color
      .badge
        position absolute
        top 0
        left 75%
        padding .03rem .1rem
        font-size .24rem
        background $theme-4-color
        color $theme-background
        border-radius .17rem
        transform-origin left top
        transform scale(.75)
    .share-title
      text-align center
      color $theme-4-color
      font-size .26rem
      margin .2rem 0

@media screen and (max-width 960px)
  .container
    .main-area
      width 100%
      &.article-area
        margin-bottom 0
    .slider
      display none

</style>
